<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .animate-glitch {
      position: relative;
      animation: titleIn 1s forwards;
      opacity: 0;
      transform: scale(0.95);
    }

    .animate-glitch:before {
      left: 2px;
      text-shadow: -1px 0 #ff00ff;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      animation: glitch-anim 2s infinite linear alternate-reverse;
    }

    .animate-glitch:before,
    .animate-glitch:after {
      content: "设计风格可视化展示";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
    }

    /* 炫酷动画标题 */
    .animate-glitch {
      position: relative;
      animation: titleIn 1s forwards;
      opacity: 0;
      transform: scale(0.95);
    }

    .animate-glitch:before,
    .animate-glitch:after {
      content: "设计风格可视化展示";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
    }

    .animate-glitch:before {
      left: 2px;
      text-shadow: -1px 0 #ff00ff;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      animation: glitch-anim 2s infinite linear alternate-reverse;
    }

    .animate-glitch:after {
      left: -2px;
      text-shadow: 1px 0 #00ffff;
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
      animation: glitch-anim 3s infinite linear alternate-reverse;
    }

    /* 动画定义 */
    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes particleFloat {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 100px 100px;
      }
    }

    @keyframes gridFloat {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 40px 40px;
      }
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.7;
      }

      50% {
        transform: scale(1.1);
        opacity: 1;
      }
    }

    @keyframes revealText {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pillFloat {
      to {
        transform: translateY(-5px);
      }
    }

    @keyframes titleIn {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes glitch-anim {
      0% {
        clip-path: polygon(0 0, 100% 0, 100% 5%, 0 5%);
      }

      5% {
        clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%);
      }

      10% {
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
      }

      15% {
        clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%);
      }

      20% {
        clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0 40%);
      }

      25% {
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
      }

      30% {
        clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
      }

      35% {
        clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
      }

      40% {
        clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%);
      }

      45% {
        clip-path: polygon(0 85%, 100% 85%, 100% 90%, 0 90%);
      }

      50% {
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
      }

      55% {
        clip-path: polygon(0 55%, 100% 55%, 100% 60%, 0 60%);
      }

      60% {
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
      }

      65% {
        clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%);
      }

      70% {
        clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%);
      }

      75% {
        clip-path: polygon(0 65%, 100% 65%, 100% 70%, 0 70%);
      }

      80% {
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
      }

      85% {
        clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%);
      }

      90% {
        clip-path: polygon(0 5%, 100% 5%, 100% 10%, 0 10%);
      }

      95% {
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
      }

      100% {
        clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%);
      }
    }
  </style>
</head>

<body>

  <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-glitch">设计风格<span class="text-gradient">可视化</span>展示</h1>



  <p>https://daohang.qiaomu.ai/ui.html</p>
</body>

</html>